<script setup>

import {Check, Delete, Edit, RefreshRight} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {doDelete, doGet, doPostParams} from "@/util/HttpRequest.js";
import {ElMessage, ElMessageBox} from "element-plus";

const tableDate = ref([])
let loading= ref(false)
let dialogVisible = ref(false)
let payProductOption = ref([])
let payWayOption = ref([])
let payTypeOption = ref([])

let payWayForm = reactive({
  payRate:0.8
})
const payWayFormRules = reactive({
  productCode:[
    {required:true,message:'请输入支付产品编号',trigger:"blur"}
  ],
  productName:[
    {required:true,message:'请输入支付产品名称',trigger:"blur"}
  ],
})
let addOrEdit = true
let ids=[]
onMounted(()=>{
  loadTableData()
})
const loadTableData = async () => {
  loading.value=true;
  getAllOptions()
  await doGet('/payWay/getPayWayTable').then(resp=>{
    if(resp.data.code===200){
      tableDate.value=resp.data.info;
    }
  }).finally(()=>{
    loading.value=false;
  })
}
const handleSwitchChange = (row) =>{
  doPostParams('/payWay/changeStatus',{id:row.id,status:row.status}).then(resp=>{
    if(resp.data.code===200){
      loadTableData()
      ElMessage.success(resp.data.msg);
    }else{
      ElMessage.error('状态修改失败');
    }
  })
}
const singleDelete = (id)=>{
  ElMessageBox.confirm('确定删除吗?').then(()=>{
    doGet('/payWay/singleDeletePayWay', {id:id}).then(resp=>{
      if(resp.data.code===200){
        loadTableData()
        ElMessage.success(resp.data.msg);
      }else{
        ElMessage.error('用户删除失败');
      }
    })
  }).catch(()=>{
    ElMessage.warning('取消删除')
  })
}
const handleSelectionChange = (rows)=>{
  ids=[]
  for(let i=0;i<rows.length;i++){
    ids[i]=rows[i].id;
  }
  ids = ids.join(",")
  console.log(ids)
}
const batchDelete = ()=>{
  ElMessageBox.confirm('确定删除吗?').then(()=>{
    if(ids.length>0){
      doDelete('/payWay/batchDeletePayWay',{ids:ids}).then(resp=>{
        if(resp.data.code===200){
          loadTableData()
          ElMessage.success(resp.data.msg);
        }else{
          ElMessage.error('用户删除失败')
        }
      })
    }else{
      ElMessage.error('请选择要删除的用户')
    }
  }).catch(()=>{
    ElMessage.warning('取消删除')
  })
}
const addPayWay = () =>{
  addOrEdit = true
  dialogVisible.value=true
}
const getAllOptions =() =>{
  doGet('/payWay/getAllOptions').then(resp=>{
    if(resp.data.code===200){
      console.log(resp)
      payProductOption=resp.data.info.payProductOption;
      payWayOption=resp.data.info.payWayOption;

      console.log(payWayOption)
    }
  })

}
const selectPayWayChange =() =>{
  doGet('/type/getPayTypeOptions',{wayCode:payWayForm.wayCode}).then(resp=>{
    if(resp.data.code===200){
      payTypeOption=resp.data.info;
    }
  })
}
</script>

<template>
  <el-table :data="tableDate" style="width: 100%;height: 100%" @selection-change="handleSelectionChange"
            v-loading="loading"
  >
    <el-table-column fixed type="selection" width="60" align="center"/>
    <el-table-column prop="wayCode" label="支付产品编号" width="150" align="center"/>
    <el-table-column prop="wayName" label="支付产品名称" width="150" align="center"/>
    <el-table-column prop="typeCode" label="支付类型编码" width="150" align="center"/>
    <el-table-column prop="typeName" label="支付类型名称" width="150" align="center"/>
    <el-table-column prop="payRate" label="费率%" width="80" align="center"/>
    <el-table-column prop="sorts" label="排序" width="80" align="center"/>
    <el-table-column prop="status" label="产品状态" width="80" align="center">
      <template #default="scope">
        <el-switch
            v-model="scope.row.status"
            active-value="ENABLE"
            inactive-value="DISABLE"
            @change="handleSwitchChange(scope.row)"
            class="ml"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #6b6b6b"
        />
      </template>
    </el-table-column>
    <el-table-column prop="editTime" label="编辑时间" width="200" align="center"/>
    <el-table-column fixed="right" width="135" align="center">
      <template #header="scope">
        <el-button size="small" @click="addPayWay()">
          添加
        </el-button>
        <el-button size="small" @click="batchDelete()">删除</el-button>
      </template>
      <template #default="scope">
        <el-button  @click="editPayWay(scope.row)" size="small" circle><el-icon><Edit /></el-icon></el-button>
        <el-button class="b2" @click="singleDelete(scope.row.id)" size="small" circle>
          <el-icon><Delete /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :title="addOrEdit?'添加':'编辑'" v-model="dialogVisible" align-center style="text-align: center" :destroy-on-close="true">
    <el-form ref="addOrEditFormRef" :model="payWayForm" label-width="auto" :rules="payWayFormRules">
      <el-form-item label="支付产品" prop="">
        <el-select  v-model="payWayForm.productCode" placeholder="选择支付产品...">
            <el-option
              v-for="item in payProductOption"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="">
        <el-select v-model="payWayForm.wayCode" @change="selectPayWayChange" placeholder="选择支付方式...">
          <el-option
              v-for="item in payWayOption"
              :key="item.code"
              :label="item.label"
              :value="item.code"

          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付类型" prop="">
        <el-select v-model="payWayForm.typeCode">
          <el-option
              v-for="item in payTypeOption"
              :key="item.payTypeCode"
              :label="item.payTypeName"
              :value="item.payTypeCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="费率" >
        <el-slider v-model="payWayForm.payRate" style="width: 300px" step="0.1" max="1"/>
      </el-form-item>
      <el-form-item label="排序">
        <el-select v-model="payWayForm.sorts" placeholder="选择位置...">
          <el-option v-for="item in payTypeOption.length" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 43%">
        <el-button color="#000000" @click="submitForm(addOrEditFormRef)"><el-icon><Check /></el-icon></el-button>
        <el-button @click="resetForm"><el-icon><RefreshRight /></el-icon></el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>
.b2{
  margin-left: 35px;
}
</style>